Utilizar fuentes personalizadas

Para incluir fuentes personalizadas en creatividades HTML5 suba un archivo de fuentes personalizadas a Studio mediante la regla @font-face de CSS. 

Tipos de archivos de fuentes admitidos

• EOT
• OTF
• TTF
• WOFF
• WOFF2

Cargar fuentes personalizadas con CSS

En el archivo CSS de la creatividad añada la regla @font-face antes que cualquier otro estilo. Para simplificar las cosas, en este ejemplo solo se utiliza un archivo de fuentes TrueType. Si desea maximizar la compatibilidad con el navegador, debería incluir también fuentes de archivos WOFF o EOT. Más información sobre la compatibilidad del navegador con @font-face en el sitio web CSS-Tricks

CSS

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

Luego utilice la propiedad del conjunto de fuentes para aplicar estilo a los elementos, tal y como se muestra en el ejemplo siguiente. Aquí, Open Sans es la fuente que se utilizará para un elemento div del texto con el ID "text-element".

CSS

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}

Subir el archivo de fuentes personalizadas a Studio

Puede subir el archivo de fuentes personalizadas con los demás archivos de creatividades o bien puede subirlo a la biblioteca de recursos si va a usar una misma fuente en distintas creatividades.

Subir una fuente con los archivos de creatividades

Si utiliza una fuente personalizada en una sola creatividad, puede subir el archivo de fuentes junto con los archivos HTML, JavaScript y de imágenes. 

Subir una fuente a la biblioteca de recursos

Si utiliza una fuente personalizada en muchas creatividades, súbala a la biblioteca de recursos y ahórrese tiempo.

Los archivos de fuentes pueden llegar a ser grandes. Utilice la carga progresiva para esperar a que la página se cargue antes de subir el archivo de fuentes. Además, para evitar que aparezca texto sin estilo y antiestético, ocúltelo hasta que se cargue el archivo de fuentes.

Usar fuentes personalizadas en creatividades dinámicas

El método descrito anteriormente también sirve si va a utilizar la misma fuente personalizada en todas las variaciones de una creatividad dinámica.

Si desea usar fuentes personalizadas distintas en cada una de las variaciones de una creatividad dinámica, súbalas a la biblioteca de recursos, obtenga las rutas de dicha biblioteca y luego insértelas en el feed. A continuación, podrá escribir el código JavaScript para modificar la regla @font-face de CSS del elemento de texto con las rutas del feed. En el ejemplo siguiente se incluyen dos columnas en el feed para subir y definir una fuente personalizada: la columna "fontname" la usará el nombre del conjunto de fuentes y la columna "font" es la que subirá el archivo de fuentes.

Código JavaScript de muestra

var sheets = document.styleSheets; // Returns an Array-like StyleSheetList
var sheet = document.styleSheets[0]; // Get the first style sheet
sheet.insertRule("@font-face {
  font-family: 'dynamicContent.SampleElement[0].fontname';
  src: url('dynamicContent.SampleElement[0].font') format('truetype');
}", 0);

// Change "text-element" to the ID of the text div you want to use the font in.
sheet.insertRule("#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}", 1);